<template>
  <div class="addFormat">
    <p class="addgoods_public_title">添加规格</p>
    <el-card class="box-card">
      <div class="addFormat_form">
        <div class="addFormat_form_item" v-for="(item,index) in formatArr" :key="index">
          <div class="addFormat_form_item_group">
            <input placeholder="规格名称" :class="{'addFormat_form_item_group_danger':errors.has('item.formatName')}" v-validate="{required: true}" v-model="item.formatName" name="item.formatName" type="text">
            <p class="addFormat_form_item_group_tip" v-show="errors.has('item.formatName')">{{ errors.first('item.formatName') }}</p>
          </div>
          <div class="addFormat_form_item_group">
            <input placeholder="价格" :class="{'addFormat_form_item_group_danger':errors.has('item.formatPrice')}" v-validate="{required: true}" v-model="item.formatPrice" name="item.formatPrice" type="text">
            <p class="addFormat_form_item_group_tip" v-show="errors.has('item.formatPrice')">{{ errors.first('item.formatPrice') }}</p>
          </div>
          <div class="addFormat_form_item_group">
            <input placeholder="库存" :class="{'addFormat_form_item_group_danger':errors.has('item.formatTotal')}" v-validate="{required: true}" v-model="item.formatTotal" name="item.formatTotal" type="text">
            <p class="addFormat_form_item_group_tip" v-show="errors.has('item.formatTotal')">{{ errors.first('item.formatTotal') }}</p>
          </div> 
          <div class="addFormat_form_item_group">
            <input @blur="addPostfix(index)" placeholder="返利比例" :class="{'addFormat_form_item_group_danger':errors.has('item.formatRebate')}" v-validate="{required: true}" v-model="item.formatRebate" name="item.formatRebate" type="text">
            <p class="addFormat_form_item_group_tip" v-show="errors.has('item.formatRebate')">{{ errors.first('item.formatRebate') }}</p>
          </div>
          <span :class="item.partInRebate||item.useNoAccount?'partIn_sel':'partIn_no'" class="partIn line50" @click="item.partInRebate=!item.partInRebate">参与返利</span>
          <span :class="item.useNoAccount?'partIn_sel':'partIn_no'" class="partIn line25" @click="item.useNoAccount=!item.useNoAccount">可使用未到账返利</span>
          <img src="~/static/images/button_tool_default.png" alt="" @click="dialogFormVisible = true">
          <el-dialog :visible.sync="dialogFormVisible">
            <el-button plain>统一价格</el-button>
            <el-button plain>统一返利</el-button>
            <el-button plain>统一库存</el-button>

          </el-dialog>

        </div>
        <el-button type="primary" icon="el-icon-plus" circle @click.native="add" size="mini"></el-button>
      </div>
    </el-card>
  </div>
</template>

<style lang="scss" scoped>
.addFormat {
  &_form {
    &_item {
      display: flex;
      align-items: center;
      margin-bottom: 20px;
      &_group {
        width: 150px;
        input {
          width: 120px;
          height: 25px;
          border-radius: 15px;
          border: 1px solid #a9a9a9;
          text-align: center;
          display: block;
          margin: 0 auto;
          &:focus {
            outline: none;
          }
        }
        &_danger {
          border-color: red !important;
        }
        &_tip {
          font-size: 12px;
          color: red;
          text-align: center;
        }
      }
      .partIn {
        width: 90px;
        height: 50px;
        text-align: center;
        border-radius: 10px;
        font-size: 14px;
        cursor: pointer;
        margin: 0 10px;
      }
      .line50 {
        line-height: 50px;
      }
      .line25 {
        line-height: 25px;
      }
      .partIn_no {
        background: #eee;
      }
      .partIn_sel {
        color: #fff;
        background: #409eff;
      }
      & /deep/ {
        .el-dialog {
          width: 20%;
          background: #409eff;
          border-radius: 10px;
          .el-dialog__close {
            color: #fff;
          }
          .el-button {
            display: block;
            width: 60%;
            margin: 0 auto;
            background: transparent;
            margin-bottom: 10px;
          }
        }
      }
    }
  }
}
</style>

<script>
export default {
  data() {
    return {
      formatArr: [{
        formatName: '', //规格名称
        formatPrice: '', //价格
        formatTotal: '', //库存
        formatRebate: '', //返利比例
        partInRebate: false, //参与返利
        useNoAccount: false, //可使用未到账返利,
      }],
      dialogFormVisible: false,
    };
  },
  methods: {
    removeFormat(item) {
      var index = this.formatArr.indexOf(item)
      if (index !== -1) {
        this.addFormat.formatArr.splice(index, 1)
      }
    },
    add() {
      this.formatArr.push({
        formatName: '', //规格名称
        formatPrice: '', //价格
        formatTotal: '', //库存
        formatRebate: '', //返利比例
        partInRebate: false, //参与返利
        useNoAccount: false, //可使用未到账返利
        key: Date.now()
      });
    },
    addPostfix(index) {
      if (this.formatArr[index].formatRebate.indexOf("%") == -1) {
        this.formatArr[index].formatRebate = this.formatArr[index].formatRebate + '%'
      }
    }
  }
}
</script>
